<template>
  <el-tabs v-model="activeName" class="demo-tabs">

    <el-tab-pane label="实时扣量" name="first">
      <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="sourceid" prop="sourceid">
          <el-input v-model="form.sourceid" placeholder="请输入sourceid" clearable/>
        </el-form-item>
        <el-form-item label="ecpm" prop="ecpm">
          <el-input v-model="form.ecpm" placeholder="请输入ecpm" clearable/>
        </el-form-item>
        <el-form-item label="num" prop="num">
          <el-input type="number" v-model="form.num" placeholder="请输入num" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="广告送审开关" name="second">
      <!-- <p style="font-size: 15px; color: #333;">示例：碳碳宝页面链接1查询  carbonPageA</p>
      <br/> -->
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item label="请输入包名">
          <el-input v-model="packageName" style="max-width: 400px" placeholder="请输入包名，例如：carbon" clearable>
          </el-input>
        </el-form-item>

        <el-form-item label="请输入链接名">
          <el-input v-model="linkType" style="max-width: 400px" placeholder="请输入链接名，例如：pA1" clearable>
            <template #append>
              <el-button :icon="Search" @click="searchStatus" />
            </template>
          </el-input>
        </el-form-item>
        <!-- <p>2非送审关，1送审开</p> -->
        <el-form-item label="当前状态" v-if="showSwitch">
          <el-switch @change="ttbChange" v-model="carbon" />
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="地域屏蔽" name="city">
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item label="省份">
          <el-input v-model="cityList" style="max-width: 400px" placeholder="请输入省份" clearable @clear="clearCity">
            <template #append>
              <el-button :icon="Search" @click="cityHandler"/>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="屏蔽查询结果"></el-form-item>

        <template v-for="(item, index) in searchCityRes" :key="index">
          <el-form-item :label="item.cityName">
            <el-switch v-model="item.checked" @change="(e) => changeItem(item, e)"/>
          </el-form-item>
        </template>

      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { gsetAmount, checkadvertstatus } from "@/api/page/list1"
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

const form = reactive({
  sourceid: '',
  ecpm: '',
  num: null
})

// 实时扣量，提交
const onSubmit = () => {
  if(form.sourceid == '' || form.ecpm == '' || form.num == ''){
    ElMessage.error('请输入表单信息')
    return
  }else{
    gsetAmount(form).then((res) => {
      if(res.code == 200){
        ElMessage({
          message: '设置成功！',
          type: 'success',
        })
        resetForm()
      }
    })
  }
}
const formRef = ref()
// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
}

// 送审开关
const carbon = ref(false) // 开关
const activeName = ref('first') // tab
const linkType = ref('') // 链接名
const packageName = ref('') // 包名
const showSwitch = ref(false) // switch的显示
// 设置   
const ttbChange = (val) => {
  checkadvertstatus({
    status: carbon.value ? 1 : 2, 
    package: packageName.value,
    link_type: linkType.value
  }).then((res) => {
    console.log('设置结果', res)
  })
}
// 查询   // 没参数，查询     // 有参数：2非送审关，1送审开
const searchStatus = () => {
  checkadvertstatus({
    status: '', 
    package: packageName.value,
    link_type: linkType.value
  }).then((res) => {
    console.log('查询结果', res)
    showSwitch.value = true
    carbon.value = res.code == '2' ? false : true
  })
}

// 地域屏蔽
let searchCityRes = ref([
  { cityName: '武汉', checked: true },
  { cityName: '上海', checked: false },
  { cityName: '深圳', checked: true }
])
let cityList = ref('')
const cityHandler = () => {
  alert('开发中...')
  return
  let a = cityList.value.split(',') // 字符串分割成数组
}
const changeItem = (item, e) => {
  alert('开发中...')
  return
  console.log('---', item, e)
}
const clearCity = () => {
  console.log('清空省份')
}
</script>